<script setup>
import {GetShopCateList, GetCateDetail, InsertOrEditCateDetail, DelCateInfoById} from "@/api/shopCate"
import dayjs from "dayjs"
import {computed, ref} from "vue"
import {ElMessage} from 'element-plus'

const params = ref({
  page: 1,
  pageSize: 10,
  keywords: undefined,
  cateId: undefined
})

const options = ref([]) // 分类类型
const dialogInfo = ref({
  visible: false,
  isEdit: false
})
const form = ref({})


// 获取分类列表
const getCateType = async () => {
  const res = await GetShopCateList({page: 1, pageSize: 100})
  options.value = res.records
}

const findTypeById = (cateId) => {
  return options.value.find(item => item.id === cateId)?.title
}

getCateType()

const data = ref([])
const total = ref(0)
const getData = async () => {
  try {
    const res = await GetCateDetail(params.value)
    data.value = res.records
    total.value = res.total
  } catch (e) {
  }
}
getData()

// 编辑或新增事件
const EditHandler = (row) => {
  dialogInfo.value.isEdit = Boolean(row.id)
  dialogInfo.value.visible = true
  form.value = {...row}
}

// 删除事件
const DelHandler = async (row) => {
  try {
    await DelCateInfoById(row.id)
    await getData()
    ElMessage.success("删除完成")
  } catch (e) {
  }
}

const handleSizeChange = (size) => {
  params.value.pageSize = size
  getData()
}

const handleCurrentChange = (page) => {
  params.value.page = page
  getData()
}

// 提交表单
const submitForm = async () => {
  try {
    await InsertOrEditCateDetail(form.value)
    dialogInfo.value.visible = false
    ElMessage.success(`${dialogInfo.value.isEdit ? "编辑" : "新增"}完成`)
    await getData()
  } catch (e) {
  }
}
</script>

<template>
  <el-card>
    <div class="mb-[20px] flex justify-between">
      <div class="w-[42%] flex">
        <el-input placeholder="请搜索关键字" v-model="params.keywords" clearable @clear="getData"></el-input>
        <el-select v-model="params.cateId" placeholder="请选择分类类型" class="ml-[10px]" clearable @clear="getData">
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
          />
        </el-select>
        <el-button type="success" class="ml-[10px]" @click="getData">查询</el-button>
      </div>
      <el-button type="primary" @click="EditHandler">新增</el-button>
    </div>
    <el-table :data="data" border stripe>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="分类">
        <template #default="{row}">
          <el-tag>{{ findTypeById(row.cateId) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template #default="{row}">
          <el-image class="w-[60px] h-[60px]" :src="row.image"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="{row}">
          {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template #default="{row}">
          {{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="EditHandler(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="DelHandler(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-[10px] flex justify-end">
      <el-pagination
          v-model:currentPage="params.page"
          v-model:page-size="params.pageSize"
          :page-sizes="[5,10, 20, 30, 40]"
          size="small"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <Dialog :title="dialogInfo.isEdit ? '编辑' : '新增'" v-model:visible="dialogInfo.visible" width="700px" height="300px"
          @onSubmit="submitForm">
    <el-form>
      <el-row :gutter="20" class="w-full">
        <el-col :span="12">
          <el-form-item label="标题">
            <el-input v-model="form.title" placeholder="请选择标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类">
            <el-select v-model="form.cateId" placeholder="请选择分类类型" class="ml-[10px]">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-row :span="12">
          <el-form-item label="图片">
            <UpLoad v-model:images="form.image" class="w-[100px] h-[100px]"></UpLoad>
          </el-form-item>
        </el-row>
      </el-row>
    </el-form>
  </Dialog>
</template>

<style scoped lang="scss">

</style>
